<template>
	<div class="detailsLeave">
		<nav-header>
			<template slot="menuBefore">
				<li v-if="parseInt(leaveDetails.origin) === 0"><router-link to="/affairs/leave/student" tag="a">学生请假</router-link></li>
				<li v-if="parseInt(leaveDetails.origin) === 1"><router-link to="/affairs/leave/teacher" tag="a">老师请假</router-link></li>
				<li class="gap">&gt;</li>
			</template>
			<li>{{leaveDetails.name}} 的请假审批</li>
		</nav-header>
		<div class="detailsLeave_">
			<ul>
				<template  >
					<li class="detailsLeave_ls clear">
						<span>请假人</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.name}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>请假类型</span>
						<div class="detailsLeave_lsr">
							<span v-if="leaveDetails.leave_style == 0">事假</span>
							<span v-if="leaveDetails.leave_style == 1">病假</span>
							<span v-if="leaveDetails.leave_style == 2">婚假</span>
							<span v-if="leaveDetails.leave_style == 3">丧假</span>
							<span v-if="leaveDetails.leave_style == 4">其他</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>开始时间</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.start_time}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>结束时间</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.end_time}} </span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>请假原因</span>
						<div class="detailsLeave_lsr">
							<span style="word-break: break-all; word-wrap: break-word;">{{leaveDetails.content}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>申请时间</span>
						<div class="detailsLeave_lsr">
							<span>{{leaveDetails.create_time}}</span>
						</div>
					</li>
					<li class="detailsLeave_ls clear">
						<span>图片</span>
						<div class="detailsLeave_lsr">
							<strong @click='previewImg(leaveDetails.picture)'>预览</strong>
						</div>
					</li>
				</template>
			</ul>
			<div class="detailsLeave_st approved" v-if="leaveDetails.status == 1">
				<i class="ipm qingjia_icon01"></i>
				<p>已批准</p>
			</div>
			<div class="detailsLeave_st unapproved"  v-if="leaveDetails.status == 2">
				<i class="ipm qingjia_icon04"></i>
				<p>未审批</p>
			</div>
			<div class="detailsLeave_st refuse" v-if="leaveDetails.status == 3">
				<i class="ipm qingjia_icon02"></i>
				<p>拒绝</p>
			</div>
			<div class="detailsLeave_st rescinded" v-if="leaveDetails.status == 4">
				<i class="ipm qingjia_icon02"></i>
				<p>已撤销</p>
			</div>
			
		</div>

		<!--  -->
		<div class="buttonCSS"  v-if="leaveDetails.status == 2 && this.$g.user_id === 6">
			<el-button type="primary" plai @click="getRefuse(leaveDetails.id)">拒绝</el-button>
			<el-button type="primary" @click="getApproval(leaveDetails.id)">批准</el-button>
		</div>
		<!--  -->
		<div class="leaveRefusal" v-if="leaveDetails.status == 3">
			<span>拒绝理由</span>
			<strong>{{leaveDetails.reason_content}}</strong>
		</div>
		<!--  -->
        <div class="prev-box">
		<el-dialog
			title="图片"
			:visible.sync="previewVisible"
			custom-class="previewIMG"
			:close-on-press-escape="false"
			:close-on-click-modal="true">
				<div class="previewIMG_">
					<img :src="BASE_URL + leaveDetails.picture">
				</div>
		</el-dialog>
        </div>
		<!-- 理由 -->
		<el-dialog
			title="理由"
			:visible.sync="reasonCause"
			width="520px"
			custom-class="reasonCause"
			:before-close="resetForm"
			:close-on-press-escape="false"
			:close-on-click-modal="false">
			<div class="Approval_TXT">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label-width="0" prop="desc">
                        <el-input
                            type="textarea"
                            placeholder="请填写拒绝理由, 不超200个字符"
                            :rows="5"
                            v-model="ruleForm.desc"
                            maxlength="200"
                            show-word-limit>
                        </el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="medium" @click="resetForm('ruleForm')">取消</el-button>
					<el-button size="medium" type="primary" @click="submitForm('ruleForm')">确定</el-button>
				</span>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		name: '',
		data() {
			return {
				previewVisible: false,
				leaveDetails: {},
				reasonCause: false, //理由--原因
				leave_id: '',
				ruleForm: {
					desc: ''
				},
				rules: {
					desc: [
						{ required: true, message: '请填写拒绝理由', trigger: 'blur' },
						{ min: 3, max: 200, message: '长度在 3 到 200 个字符', trigger: 'blur' }
					]
				},
				approveStatus:null,
			}
		},
		created(){
			this.getLeaveDetails()
		},
		methods: {
			getLeaveDetails(){
				let success = (res=>{
					let data = res.data;
					this.leaveDetails = data;
					this.leave_title = this.leaveDetails.name
				})
				this.$ajax({
					url: 'api/leave/leave',
					method: 'get',
					params: {
						leaveid: this.$route.params.id,
					},
					func: {
						success: success
					}
				})
			},
			//批准
			getApproval(res_id){
				this.approveStatus = 1;
				this.$confirm('确认要批准申请吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					// customClass: 'confirm-them',
				}).then(() => {
					let success = (res => {
						// let data = res.data;
						this.getLeaveDetails()
					});
					this.$ajax({
						url: 'api/leave/leave',
						method: 'put',
						params: {
							status: 2,
							leaveid: res_id
						},
						func: {
							success: success
						}
					})
				}).catch(() => {});
			},
			//查看图片
			previewImg(picture){
				if (picture == '' || picture == null) {
					 this.$message.error('图片没有上传哦~');
					 return
				}
				
				this.previewVisible = true
			},
			getRefuse(red_id){
				this.approveStatus = 7;
				this.leave_id = red_id
				this.reasonCause = true
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let success = (res => {
							this.$message.success(res.msg);
							this.reasonCause = false
							this.getLeaveDetails()
							this.ruleForm.desc = ''
						});
						this.$ajax({
							url: 'api/leave/leave',
							method: 'put',
							params: {
								leaveid: this.leave_id,
								reason_content: this.ruleForm.desc,
								status: this.approveStatus
							},
							func: {
								success: success
							}
						})
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				// this.$refs[formName].clearValidate();
				this.$refs.ruleForm.clearValidate();
				this.reasonCause = false;
			},
		}
	}
</script>
<style lang="scss">
	.detailsLeave_{
		background: #F3F8FF;
		padding: 45px 30px 60px;
		position: relative;
		margin: 30px 0 55px;
    }
    
    .prev-box {
        .el-dialog__wrapper {
            max-height: 92vh;
            overflow: hidden;

            >div {
                padding-bottom: 40px;
                height: 100%;
            }

            .el-dialog__body {
                height: 76%;
                overflow: auto;
            }
        }
    }

	.detailsLeave_ls{
		margin-bottom: 20px;
		>span{
			display: block;
			float: left;
			width: 100px;
			line-height: 19px;
			font-size: 14px;
		}
		>div{
			margin-left: 100px;
			>span{
				line-height: 19px;
				font-size: 14px;
			}
			>strong{
				color: #409EFF;
				line-height: 19px;
				font-size: 14px;
				cursor: pointer;
			}
		}
	}

	.detailsLeave_st{
		position: absolute;
		top: 0;
		right: 0;
		top: 45px;
		right: 40px;
		>p{
			margin-top: 20px;
		}
	}

	.previewIMG_{
		text-align: center;
		vertical-align: middle;
        overflow: hidden;
        
        img {
            max-width: 100%;
        }
	}

	.approved{
		>p{
			color: #3BB080;
		}
	}
	.unapproved{
		>p{
			color: #1995DB;
		}
	}
	.refuse{
		>p{
			color: red;
		}
	}

	.rescinded{
		>p{
			color:#666;
		}
	}

	.leaveRefusal{
		background: #FFF1EA;
		margin-top: 40px;
		padding: 30px;
		font-size: 14px;
		line-height: 19px;
		>strong{
			color: #DD5D5D;
			margin-left: 60px;
		}
	}
	.Approval_TXT{
		padding: 50px 20px;
		text-align: right;
		font-size: 14px;
	}
</style>